<template>
  <div class="app-container">
    <div v-loading="listLoading" class="control">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="14" :lg="14">
          <el-card shadow="hover" class="box-card lot-info">
            <div class="lot-name">
              {{ name }}{{ state === 2 ? ' - 已结束' : '' }} -
              <small>
                <span>总拍品：{{ num[0] }} 件</span><span>已成交：{{ num[1] }} 件</span>
                <span>流拍：{{ num[2] }} 件</span><span>未拍：{{ num[3] }} 件</span>
              </small>
              <br>
              <div style="margin-top:12px;font-size:12px"><span>即时成交金额：{{ toThousands(deal[0]) }}</span><span>即时成交比：{{ deal[1] }}</span></div>
            </div>
            <el-button size="small" type="danger" :disabled="state !== 0" @click="handleLotState(1)">开始拍卖</el-button>
            <el-button size="small" type="danger" :disabled="state !== 1" @click="handleLotState(2)">结束拍卖</el-button>
            <el-button size="small" type="primary" :disabled="state !== 1" @click="handleToScreen">投屏功能</el-button>
            <el-button size="small" type="primary" :disabled="state !== 1" @click="handleToAucer">大屏幕</el-button>
            <el-button size="small" type="primary" @click="handleToBidnet">网拍</el-button>
            <el-popover width="160" placement="top-start" trigger="hover">
              <img style="width: 100%;" :src="h5Qr" alt="">
              <el-button slot="reference" size="small" type="primary" :disabled="state !== 1">访问直播间</el-button>
            </el-popover>
            <el-button v-if="livePlay" :loading="liveLoading" size="small" type="warning" :disabled="state !== 1" @click="handleLivePush(0)">关闭推流</el-button>
            <el-button v-else :loading="liveLoading" size="small" type="warning" :disabled="state !== 1" @click="handleLivePush(1)">开启推流</el-button>
            <div style="display: inline-block">
              <div v-show="livePlay" class="lot-live">
                <el-input v-model="liveUrl" size="mini" disabled />
                <el-button size="mini" @click="handleCopy">复制</el-button>
                <el-popover width="160" placement="top" trigger="hover">
                  <img style="width: 100%;" :src="liveQr" alt="">
                  <img slot="reference" src="@/assets/icon-qr.png" alt="">
                </el-popover>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" class="box-card curr">
            <div v-show="!curr" class="empty">请在右侧拍品列表选择要竞拍的拍品</div>
            <div v-if="curr" class="goods-title">
              <div class="goods-title-left">
                <div>Lot &nbsp;{{ curr.lot }}</div>
                <span>{{ curr.name }}</span>
              </div>
              <div class="goods-title-right">
                <div>起拍价</div>
                <span>{{ toThousands(curr.start) }}</span>
              </div>
            </div>
            <div v-if="curr" class="goods">
              <div class="goods-cover">
                <img :src="curr&&curr.cover" alt="">
              </div>
              <div class="goods-info">
                <div class="goods-spec">
                  <span v-for="(item, index) in curr.spec" :key="index">{{ item.attr }}: {{ item.val }}</span>
                </div>
                <div class="pre-next">
                  <el-button :disabled="state !== 1 || curr.state === 1" size="small" type="primary" @click="handlePre"><i class="el-icon-back" /> 上一件</el-button>
                  <div v-if="curr" class="price">
                    <div style="text-align:left;font-size:14px;margin-bottom: 5px">{{ curr.state === 2 ? '落槌价' : curr.state === 1 && curr.curr_buyer !== '' ? '当前价' : '起拍价' }}:</div>
                    <small :class="curr.state === 2 && curr.final !== '流拍' ? 'green' : ''">￥</small>
                    <b :class="curr.state === 2 && curr.final !== '流拍' ? 'green' : ''">{{ curr.state === 2 ? toThousands(curr.final) : toThousands(curr.curr) }}</b>
                    <el-tag v-if="curr.curr_buyer !== '' && curr.state > 0 && curr.final !== '流拍'" size="mini" type="info">{{ Number(curr.curr_buyer) === 0 ? '现场' : '网络' }}</el-tag>
                  </div>
                  <el-button :disabled="state !== 1 || curr.state === 1" size="small" type="primary" @click="handleNext">下一件<i class="el-icon-right el-icon--right" /></el-button>
                </div>
                <div v-if="curr" v-loading="btnsLoading" element-loading-background="rgba(255, 255, 255, 0.5)">
                  <div class="btns">
                    <el-button size="small" :disabled="state !== 1 || curr.state !== 0" type="warning" @click="handleGoodsOp('start')">竞拍</el-button>
                    <el-button size="small" :disabled="state !== 1 || curr.state !== 1" type="warning" @click="wsSendMsg('netBid')">网络</el-button>
                    <el-button size="small" :disabled="state !== 1 || curr.state !== 1" type="warning" @click="wsSendMsg('liveBid')">现场</el-button>
                    <el-button size="small" :disabled="state !== 1 || curr.state !== 1" type="warning" @click="wsSendMsg('phoneBid')">电话</el-button>
                  </div>
                  <div class="btns">
                    <el-button size="small" :disabled="state !== 1 || curr.state === 0" type="warning" @click="handleGoodsOp('re')">重拍</el-button>
                    <el-button size="small" :disabled="state !== 1 || curr.state !== 1" type="warning" @click="handleGoodsOp('cancel')">撤拍</el-button>
                    <el-button size="small" :disabled="state !== 1 || curr.state !== 1" type="warning" @click="handleGoodsOp('pass')">流拍</el-button>
                    <el-button size="small" :disabled="state !== 1 || curr.state !== 1" type="warning" @click="wsSendMsg('willHammer')">马上落槌</el-button>
                    <el-button size="small" :disabled="state !== 1 || curr.state !== 1" type="warning" @click="showDialog">成交</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="price-box">
              <div class="input-box">
                <div class="input-check">
                  <el-input v-model.trim="mybid" type="number" :min="0" :disabled="state !== 1 || curr.state !== 1" size="medium" placeholder="回车或点击右侧按钮出价" @keyup.enter.native="handleBid(inputBid, 1)">
                    <el-checkbox slot="append" v-model="isSave">保留</el-checkbox>
                  </el-input>
                  <el-button size="medium" :loading="btnLoading" type="primary" :disabled="state !== 1 || curr.state !== 1" @click="handleBid(inputBid, 1)">确认出价</el-button>
                </div>
                <div class="input-btn">
                  <el-radio-group v-model="unit" :disabled="state !== 1" size="medium">
                    <!-- <el-radio-button :label="10">十</el-radio-button> -->
                    <el-radio-button :label="100">百</el-radio-button>
                    <el-radio-button :label="1000">千</el-radio-button>
                    <el-radio-button :label="10000">万</el-radio-button>
                    <el-radio-button :label="100000">十万</el-radio-button>
                    <el-radio-button :label="1000000">百万</el-radio-button>
                    <el-radio-button :label="10000000">千万</el-radio-button>
                    <!-- <el-radio-button :label="100000000">亿</el-radio-button> -->
                  </el-radio-group>
                  <el-button size="medium" type="danger" :loading="revokeBtnLoading" :disabled="state !== 1 || (curr.curr_buyer === '' || curr.state !== 1) || disRevokeBtn" @click="handleRevoke">撤回出价</el-button>
                </div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" class="box-card bid-area">
            <div class="input-box">
              <label>出价：</label>
              <div class="bid-scroll">
                <template v-for="(item, index) in scrollBids">
                  <div :key="index" class="bid-scroll-item">
                    <div class="bid-scroll-item-icon" @click="addUnitVal(index)"><i class="el-icon-arrow-up" /></div>
                    <div class="bid-scroll-item-num">{{ item }}</div>
                    <div class="bid-scroll-item-icon" @click="reduceUnitVal(index)"><i class="el-icon-arrow-down" /></div>
                    <div class="bid-scroll-item-unit">{{ scrollBidsUnit[index] }}</div>
                    <div class="bid-scroll-item-clear" @click="clearUnitVal(index)"><i class="el-icon-error" /></div>
                  </div>
                </template>
                <div class="bid-scroll-btn">
                  <el-button size="medium" type="primary" :disabled="state !== 1 || curr.state !== 1" :loading="clickBidLoading" @click="handleBid(clickBid, 3)">确认出价</el-button>
                </div>
              </div>

              <div class="force-btn input-btn">
                <el-input v-model.trim="forcebid" type="number" :min="0" :disabled="state !== 1 || curr.state !== 1" size="large" placeholder="回车或点击右侧按钮出价" @keyup.enter.native="handleBid(inputForceBid, 4)" />
                <el-button size="" :loading="forceBtnLoading" type="danger" :disabled="state !== 1 || curr.state !== 1" @click="handleBid(inputForceBid, 4)">强制出价</el-button>
              </div>
            </div>
            <el-divider><i class="el-icon-mouse" /></el-divider>
            <div class="bid-add">
              <el-radio-group v-model="nextbidOp[0]" size="meduim">
                <el-radio :disabled="state !== 1" :label="1" border>首位</el-radio>
                <el-radio :disabled="state !== 1" :label="2" border>二位</el-radio>
                <el-radio :disabled="state !== 1" :label="3" border>三位</el-radio>
              </el-radio-group>
              <el-radio-group v-model="nextbidOp[1]" size="meduim">
                <el-radio :disabled="state !== 1" :label="1" border>+1</el-radio>
                <el-radio :disabled="state !== 1" :label="2" border>2, 5, 8</el-radio>
                <el-radio :disabled="state !== 1" :label="5" border>+5</el-radio>
              </el-radio-group>
              <br>
              <el-button size="medium" type="primary" :loading="nextBtnLoading" :disabled="state !== 1 || curr.state !== 1" @click="handleBid(nextBid, 2)">出价：{{ toThousands(nextBid) }}</el-button>
              <!-- <el-divider><i class="el-icon-mouse" /></el-divider> -->
              <el-button size="medium" type="danger" :loading="revokeBtnLoading" :disabled="state !== 1 || (curr.curr_buyer === '' || curr.state !== 1) || disRevokeBtn" @click="handleRevoke">撤回出价</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="9" :lg="9">
          <el-card shadow="hover" class="box-card bid-list">
            <div slot="header" class="clearfix bid-th">
              <div>号牌</div><div>出价</div><div>竞拍者</div>
            </div>
            <div id="bidlist" ref="bidlist" class="bid-item-box">
              <div v-for="(item, index) in bids" :key="index" class="bid-item">
                <div>{{ item.num }}</div><div>{{ toThousands(item.bid) }}</div><div>{{ item.buyer_way }}</div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" class="box-card">
            <el-table :data="recent" border fit>
              <el-table-column align="center" prop="lot" label="Lot" width="70" />
              <el-table-column align="center" prop="final" label="落槌价">
                <template slot-scope="scope">{{ toThousands(scope.row.final) }}</template>
              </el-table-column>
              <el-table-column align="center" prop="buyer_way" label="竞拍者" width="70" />
              <el-table-column show-overflow-tooltip align="center" prop="buyer_num" label="号牌" />
            </el-table>
          </el-card>
          <el-card shadow="hover" class="box-card goods-list">
            <el-input v-model.trim="search" type="number" size="medium" placeholder="搜索图录号，仅支持数字" @keyup.enter.native="handleSearch">
              <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
            </el-input>
            <el-table ref="goodsTable" :data="goods" height="300" border fit :row-class-name="tableRowClassName" @row-click="handleRowClick">
              <el-table-column align="center" prop="lot" label="Lot" width="70" />
              <el-table-column align="center" show-overflow-tooltip class-name="goods-name-td" prop="name" min-width="205" label="名称" />
              <el-table-column align="center" prop="final" label="落槌价" width="80">
                <template slot-scope="scope">{{ toThousands(scope.row.final) }}</template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="hover" class="box-card">
            <div class="add-broadcast">
              <el-input v-model.trim="broadcastMsg" :disabled="state !== 1" size="medium" @keyup.enter.native="handleRadio" />
              <el-button size="medium" :loading="radioLoading" type="primary" :disabled="state !== 1" @click="handleRadio">发布广播</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="号牌确认" width="40%" :visible.sync="dialogVisible">
      <el-input v-if="curr" v-model.trim="dealNum" :disabled="Number(curr.curr_buyer) !== 0" placeholder="请输入现场号牌">
        <template slot="prepend">{{ Number(curr.curr_buyer) === 0 ? '现场' : '网络' }}</template>
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="dialogBtnLoading" @click="handleLiveNum">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getLotData, setLotState, setGoodsState, postLiveBid, revokeBid, setLivePush, setLiveNum } from '@/api/ctrl'
import { toThousands } from '@/utils'
export default {
  data () {
    return {
      lotId: '',
      name: '',
      state: 0,
      num: [0, 0, 0, 0],
      deal: ['0', '0.00%'],
      goods: [],
      recent: [],
      currIndex: -1,
      listLoading: true,
      bids: [],
      mybid: '',
      forcebid: '',
      unit: 10000,
      nextbidOp: [1, 1],
      search: '',
      btnLoading: false,
      nextBtnLoading: false,
      clickBidLoading: false,
      forceBtnLoading: false,
      revokeBtnLoading: false,
      disRevokeBtn: false,
      livePlay: false,
      liveLoading: false,
      liveUrl: '',
      liveQr: '',
      h5Qr: '',
      isSave: false,
      btnsLoading: false,
      scrollBids: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      scrollBidsUnit: ['亿', '千万', '百万', '十万', '万', '千', '百', '十', '个'],
      dialogVisible: false,
      dialogBtnLoading: false,
      dealNum: '',
      broadcastMsg: '',
      radioLoading: false
    }
  },
  computed: {
    curr: {
      get: function () {
        return this.goods[this.currIndex]
      }
    },
    clickBid () {
      return Number(this.scrollBids.join(''))
    },
    inputBid () {
      if (this.mybid !== '') {
        return this.mybid * this.unit
      } else {
        return ''
      }
    },
    inputForceBid () {
      if (this.forcebid !== '') {
        return this.forcebid * this.unit
      } else {
        return ''
      }
    },
    nextBid () {
      if (this.curr && this.curr.state === 1) {
        var curr = Number(this.curr.curr) || 0
        var length = curr.toString().length
        if (this.nextbidOp[1] === 1 || this.nextbidOp[1] === 5) {
          return curr + Math.pow(10, length - this.nextbidOp[0]) * this.nextbidOp[1]
        } else {
          const comp = Number(curr.toString()[this.nextbidOp[0] - 1])
          var od = this.nextbidOp[0]
          if (length < this.nextbidOp[0]) {
            od = length
          }
          var unit = Math.pow(10, (length - od + 1))
          var step = 2
          switch (true) {
            case comp < 2:
              step = 2
              break
            case comp >= 2 && comp < 5:
              step = 5
              break
            case comp >= 5 && comp < 8:
              step = 8
              break
            case comp >= 8:
              step = 10
              break
          }
          return Math.floor(curr / unit) * unit + step * Math.pow(10, length - od)
        }
      } else {
        return ''
      }
    }
  },
  watch: {
    'curr.curr': function () {
      this.setScrollBids(this.curr.curr)
    }
  },
  created () {
    const id = this.$route.params && this.$route.params.id
    this.lotId = id
    this.fetchData()
    this.initWebSocket()
  },
  mounted () {
    document.addEventListener('visibilitychange', this.handleVisiable)
  },
  destroyed () {
    this.wsSendMsg('leave')
  },
  methods: {
    handleVisiable (e) {
      if (e.target.visibilityState === 'visible') {
        if (!this.global.wsConnected) {
          this.initWebSocket()
        }
      }
    },
    fetchData () {
      this.listLoading = true
      getLotData(this.lotId).then(res => {
        this.name = res.data.name
        this.state = res.data.state
        this.num = res.data.num
        this.deal = res.data.deal
        this.currIndex = res.data.index
        this.goods = res.data.goods
        this.recent = res.data.recent
        this.total = res.data.total
        this.livePlay = res.data.livePush.play
        this.liveUrl = res.data.livePush.url
        this.liveQr = res.data.livePush.qr
        this.h5Qr = res.data.h5qr
        this.disRevokeBtn = res.data.disRevoke
        this.bids = res.data.bids.map(el => {
          el.buyer_way = Number(el.num) === 0 ? '现场' : '网络'
          return el
        })
        this.$route.meta.title = `${res.data.name} / 控制台`
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.listLoading = false
      })
    },
    handlePre () {
      if (this.currIndex === 0) {
        this.currIndex = this.goods.length - 1
      } else {
        this.currIndex -= 1
      }
    },
    handleNext () {
      if (this.currIndex === this.goods.length - 1) {
        this.currIndex = 0
      } else {
        this.currIndex += 1
      }
    },
    handleRowClick (row) {
      if (this.curr.state === 1) {
        this.$message({
          message: '当前拍品已开拍，如需更换拍品请先撤拍',
          type: 'warning'
        })
        return
      }
      this.currIndex = row.index
    },
    handleLotState (state) {
      if (this.curr.state === 1) {
        this.$message({
          message: '请先完成当前进行中的竞拍',
          type: 'warning'
        })
        return
      }
      const tip = state === 1 ? '确定要开始本场拍卖吗？' : '结束后将设为历史专场不能再次开启，确定要结束本场拍卖吗？'
      this.$confirm(tip, '提示', {
        confirmButtonText: state === 1 ? '开始' : '结束',
        type: 'warning'
      }).then(() => {
        setLotState({ id: this.lotId, state }).then(res => {
          this.state = res.data.state
        }).catch(err => { console.log(err) })
      }).catch(() => {})
    },
    showDialog () {
      if (Number(this.curr.curr_buyer) === 0) {
        this.dealNum = ''
      } else {
        this.dealNum = this.curr.curr_buyer
      }
      this.dialogVisible = true
    },
    handleLiveNum () {
      if (this.dealNum === '') {
        this.$message.error('号牌不能为空')
        return
      }
      if (Number(this.curr.curr_buyer) === 0) {
        this.dialogBtnLoading = true
        const data = {
          lotId: this.lotId,
          goodsId: this.curr.id,
          liveNum: this.dealNum
        }
        setLiveNum(data).then(res => {
          this.dialogBtnLoading = false
          this.dialogVisible = false
          this.dealNum = ''
          this.handleGoodsOp('deal')
        }).catch(err => {
          console.log(err)
          this.dialogBtnLoading = false
        })
      } else {
        this.dialogVisible = false
        this.handleGoodsOp('deal')
      }
    },
    handleGoodsOp (op) {
      // const opMap = {
      //   start: '开始竞拍',
      //   cancel: '撤拍',
      //   pass: '流拍',
      //   deal: '落槌',
      //   re: '重拍'
      // }
      // var tip = `确定要${opMap[op]}吗？`
      // if (op === 'pass' && this.curr.curr_buyer !== '') {
      //   tip = '当前已有出价，确定要流拍吗？'
      // }
      // this.$confirm(tip, '提示', {
      //   type: 'warning'
      // }).then(() => {
      this.btnsLoading = true
      if (op === 'start' || op === 're') {
        this.bids = []
      }
      setGoodsState({ id: this.curr.id, op, lot_id: this.lotId }).then(res => {
        this.goods.splice(this.currIndex, 1, res.data)
        if (op === 'deal' || op === 'pass') {
          // if (this.recent.length >= 3) {
          //   this.recent.shift()
          // }
          // const way = Number(res.data.curr_buyer) === 0 && res.data.curr_buyer !== '' ? '现场' : res.data.curr_buyer === '' ? '' : '网络'
          // this.recent.push({ lot: res.data.lot, final: res.data.final, buyer_num: res.data.curr_buyer, buyer_way: way })
          if (res.data.next_index !== '') {
            this.currIndex = res.data.next_index
            this.handleGoodsOp('start')
          } else {
            this.btnsLoading = false
          }
        } else {
          this.btnsLoading = false
        }
      }).catch(err => {
        console.log(err)
        this.btnsLoading = false
      })
      // }).catch(() => {})
    },
    handleSearch () {
      const index = this.goods.findIndex(el => Number(el.lot) === Number(this.search))
      if (index > 0) {
        this.$refs.goodsTable.bodyWrapper.scrollTop = index * 36
      } else {
        this.$refs.goodsTable.bodyWrapper.scrollTop = 0
      }
    },
    addUnitVal (index) {
      var curr = this.scrollBids[index]
      var val = curr >= 9 ? 0 : curr + 1
      this.scrollBids.splice(index, 1, val)
    },
    reduceUnitVal (index) {
      var curr = this.scrollBids[index]
      var val = curr <= 0 ? 9 : curr - 1
      this.scrollBids.splice(index, 1, val)
    },
    clearUnitVal (index) {
      this.scrollBids.splice(index, 1, 0)
    },
    setScrollBids (val) {
      val = val.toString()
      const str = (Array(9).join(0) + val).slice(-9)
      this.scrollBids = [...`${str}`].map(el => parseInt(el))
    },
    handleBid (bid, from) {
      // 1输入出价 2下口价 3密码锁出价 4强制出价
      if (!bid) {
        this.$message({
          message: '出价不能为空',
          type: 'warning'
        })
        return
      }
      if (from !== 4 && bid <= this.curr.curr) {
        if (this.curr.curr_buyer !== '') {
          this.$message({
            message: '出价不能低于当前价',
            type: 'warning'
          })
          return
        }
        if (this.curr.curr_buyer === '' && bid < this.curr.curr) {
          this.$message({
            message: '出价不能低于起拍价',
            type: 'warning'
          })
          return
        }
      }
      if (from === 1) {
        this.btnLoading = true
      } else if (from === 2) {
        this.nextBtnLoading = true
      } else if (from === 3) {
        this.clickBidLoading = true
      } else {
        this.forceBtnLoading = true
      }
      postLiveBid({ id: this.curr.id, bid }).then(res => {
        this.btnLoading = false
        this.nextBtnLoading = false
        this.clickBidLoading = false
        this.forceBtnLoading = false
        if (!this.isSave) {
          this.mybid = ''
        }
      }).catch(err => {
        console.log(err)
        this.btnLoading = false
        this.nextBtnLoading = false
        this.clickBidLoading = false
        this.forceBtnLoading = false
      })
    },
    handleRevoke () {
      this.$confirm('确定要撤回出价吗', '提示', {
        type: 'warning'
      }).then(() => {
        this.revokeBtnLoading = true
        revokeBid({ id: this.curr.id }).then(res => {
          this.disRevokeBtn = true
          this.revokeBtnLoading = false
          this.$notify({
            message: res.msg,
            type: 'success',
            duration: 2000
          })
        }).catch(err => {
          console.log(err)
          this.revokeBtnLoading = false
        })
      }).catch(() => {})
    },
    handleLivePush (live) {
      var tip = live ? '开启' : '关闭'
      this.$confirm(`确定要${tip}直播推流吗？`, '提示', {
        type: 'warning'
      }).then(() => {
        this.liveLoading = true
        setLivePush({ id: this.lotId, live }).then(res => {
          this.livePlay = res.data.play
          this.liveUrl = res.data.url
          this.liveQr = res.data.qr
          this.liveLoading = false
        }).catch(err => {
          console.log(err)
          this.liveLoading = false
        })
      }).catch(() => {})
    },
    handleCopy () {
      this.$copyText(this.liveUrl).then(e => {
        this.$message({
          message: '已成功复制到剪贴板！',
          type: 'success'
        })
      }).catch(() => {})
    },
    initWebSocket () {
      const wsData = {
        type: 'join',
        lot_id: this.lotId
      }
      if (this.global.ws) {
        if (this.global.wsConnected) {
          this.global.ws.send(JSON.stringify(wsData))
        }
      } else {
        this.global.ws = new WebSocket(process.env.VUE_APP_WS_HOST)
        this.global.setWs(this.global.ws)
      }
      this.global.ws.onopen = this.wsOnOpen
      this.global.ws.onerror = this.wsOnError
      this.global.ws.onmessage = this.wsOnMessage
      this.global.ws.onclose = this.wsOnClose
    },
    wsOnMessage (e) {
      var data = JSON.parse(e.data)
      // console.log(data)
      const arr = ['willHammer', 'faceLive', 'startAuc', 'cancelAuc', 'dealAuc', 'passAuc', 'reAuc', 'liveBid', 'netBid', 'phoneBid', 'broadcast']
      if (Number(data.lot_id) === Number(this.lotId)) {
        switch (true) {
          // 进入、离开专场
          case data.type === 'join' || data.type === 'leave':
            console.log(`${data.uid} ${data.type} 专场 ${this.lotId}`)
            break
          case data.type === 'end':
            console.log(`结束专场 ${this.lotId}`)
            break
          case data.type === 'livePlay':
            console.log(`直播推流：${data.play}`)
            this.livePlay = data.play
            this.liveUrl = data.url
            this.liveQr = data.qr
            break
          // 更新统计数据
          case data.type === 'count':
            console.log('更新控制台实时统计数据！')
            this.num = data.num
            this.deal = data.deal
            break
          // 拍品操作客户端广播
          case arr.indexOf(data.type) > -1:
            console.log('客户端广播: ' + data.msg)
            if (data.recent) {
              if (this.recent.length >= 3) {
                this.recent.shift()
              }
              this.recent.push(data.recent)
            }
            break
          // 出价更新出价列表 撤销出价
          case data.type === 'bid' || data.type === 'revoke':
            var { num, bid } = data
            var way = Number(num) === 0 ? '现场' : '网络'
            this.curr.curr = bid
            this.curr.curr_buyer = num
            if (data.type === 'bid') {
              this.bids.unshift({ num, bid, buyer_way: way })
              this.disRevokeBtn = false
            } else {
              this.bids.shift()
            }
            // this.scrollBidList()
            console.log(`${way}出价：${this.toThousands(bid)}`)
            break
        }
      }
    },
    wsOnOpen () {
      console.log('组件内WebSocket连接成功!')
      this.global.wsConnected = true
      this.wsSendMsg('join')
    },
    wsOnError (e) {
      console.log('组件内WebSocket连接发生错误!')
      this.global.wsConnected = false
    },
    wsOnClose () {
      console.log('组件内WebSocket连接关闭!')
      this.global.wsConnected = false
      this.global.ws = new WebSocket(process.env.VUE_APP_WS_HOST)
      this.global.setWs(this.ws)
    },
    wsSendMsg (type, broadcastMsg) {
      if (this.global.ws && this.global.wsConnected) {
        var msg = {
          type,
          lot_id: this.lotId
        }
        if (broadcastMsg) {
          msg.msg = broadcastMsg
        }
        this.global.ws.send(JSON.stringify(msg))
        if (type === 'broadcast') {
          this.$message({
            showClose: true,
            message: '已发送广播',
            type: 'success',
            duration: 1500
          })
        }
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      row.index = rowIndex
    },
    toThousands,
    scrollBidList () {
      setTimeout(() => {
        this.$refs.bidlist.scrollTop = this.bids.length * 40 - 30
      }, 0)
    },
    handleToScreen () {
      window.open(window.location.origin + window.location.pathname + '#/screen?id=' + this.lotId)
    },
    handleToAucer () {
      window.open(window.location.origin + window.location.pathname + '#/aucer?id=' + this.lotId)
    },
    handleToBidnet () {
      window.open(`${process.env.VUE_APP_HOST}/sub/ctrlbid/#/`)
    },
    handleRadio () {
      if (this.broadcastMsg) {
        this.radioLoading = true
        this.wsSendMsg('broadcast', this.broadcastMsg)
        setTimeout(() => {
          this.radioLoading = false
          this.broadcastMsg = ''
          // this.$message.success('广播成功')
        }, 500)
      } else {
        this.$message.warning('请填写广播内容')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.control {
  width: 100%;
  max-width: 1250px;
  .green {
    color: green !important;
  }
  .box-card {
    margin-bottom: 15px;
    .empty {
      color: #666;
      text-align: center;
      font-size: 14px;
    }
  }
  .curr {
    .goods-title {
      display: flex;
      font-weight: 600;
      justify-content: space-between;
      // padding-right: 150px;
      margin-bottom: 10px;
      span {
        line-height: 1.5;
      }
      &-left {
        font-size: 18px;
      }
      &-right {
        font-size: 16px;
        text-align: center;
        span {
          font-size: 18px;
          color: #ca2828;
        }
      }
    }
    .goods-spec {
      font-size: 14px;
      color: #555;
      margin: 10px 0;
      span {
        margin-right: 10px;
      }
    }
    .goods {
      display: flex;
      &-cover {
        width: 220px;
        max-height: 230px;
        display: flex;
        align-items: center;
        overflow: hidden;
        margin-right: 25px;
        padding: 5px;
        border: 2px solid #333;
        border-radius: 3px;
        img {
          width: 100%;
          height: auto;
        }
      }
      &-info {
        max-height: 300px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p {
          line-height: 1.3;
        }
        .pre-next {
          display: flex;
          margin-bottom: 10px;
          justify-content: space-between;
          align-items: center;
        }
        .btns {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          // justify-content: flex-start;
          .el-button {
            margin-bottom: 10px;
          }
          .el-button+.el-button {
            margin-left: 0;
          }
        }
      }
    }
    .price-box {
      display: flex;
      justify-content: space-between;
      align-items:center;
      margin-top: 20px;
    }
    .price {
      text-align: center;
      padding: 5px 0 10px;
      small {
        color: firebrick;
        font-size: 14px;
      }
      b {
        font-size: 30px;
        color: rgb(202, 40, 40);
        margin: 0 5px 0 0;
        vertical-align: -3px;
      }
    }
    // .btns {
    //   display: flex;
    //   flex-wrap: wrap;
    //   justify-content: space-around;
    //   .el-button {
    //     margin-bottom: 10px;
    //   }
    // }
  }
  .bid-scroll {
    margin: 12px auto 8px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    &-item {
      width: 42px;
      text-align: center;
      border: 1px solid #ccc;
      border-right: none;
      &:nth-last-of-type(2) {
        margin-right: 15px;
        border-right: 1px solid #ccc;
      }
      &-num {
        font-size: 20px;
        color: green;
        font-weight: bold;
        line-height: 1.4;
        border-top: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
      }
      &-icon {
        padding: 4px 0;
        font-weight: 600;
        font-size: 12px;
        background: #f5f7fa;
        &:hover {
          cursor: pointer;
          color: #009788;
        }
      }
      &-unit {
        font-size: 12px;
        line-height: 2;
        border-top: 1px solid #dcdfe6;
      }
      &-clear {
        color: gray;
        padding-bottom: 2px;
        &:hover {
          cursor: pointer;
          color: #009788;
        }
      }
    }
    &-btn {
      display: flex;
      flex-direction: column;
      .el-button {
        margin-left: 15px;
        margin-bottom: 10px;
      }
    }
  }
  .input-box {
    width: 100%;
    max-width: 510px;
    margin: 0 auto 20px;
    .input-check {
      width: 100%;
      max-width: 560px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // .el-input {
      //   margin-left: 12px;
      // }
    }
    .el-input {
      width: 100%;
      margin: 10px 14px 10px 0;
    }
    // .el-radio-group {
    //   margin: 10px 10px 0 0px;
    // }
    .el-radio-group {
      width: 100%;
      max-width: 560px;
      margin: 10px 10px 0 0px;
      .el-radio-button {
        width: 12.5%;
      }
    }
    .input-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .bid-list {
    .bid-item-box {
      height: 160px;
      overflow-y: scroll;
    }
    .bid-th, .bid-item{
      background: #b8bcc4;
      display: flex;
      text-align: center;
      div {
        padding: 12px 0;
        border-right: 1px solid #eee;
        &:first-of-type {
          width: 30%;
        }
        &:last-of-type {
          width: 30%;
          border-right: none;
        }
        &:nth-of-type(2) {
          flex: 1;
        }
      }
    }
    .bid-item {
      color: #606266;
      font-size: 14px;
      background: #fff;
      border-bottom: 1px solid #eee;
      &:last-of-type {
        border: none;
      }
      div {
        padding: 12px 0;
        border-right: none;
      }
    }
  }
  .bid-area {
    .bid-add {
      text-align: center;
      .el-radio {
        width: 100px;
        margin-bottom: 15px;
      }
    }
  }
  .lot-info {
    .el-button {
      margin-bottom: 10px;
    }
    .lot-name {
      margin-bottom: 10px;
      span {
        margin-right: 10px;
      }
    }
    .lot-live {
      display: flex;
      margin: 15px 0 0;
      width: 470px;
      align-items: center;
      .el-button {
        width: 60px;
        margin: 0 10px;
        display: block;
      }
      img {
        width: 24px;
        height: 100%;
        border-radius: 10%;
        display: block;
      }
    }
    .lot-num {
      font-size: 14px;
      line-height: 1.5;
      &:nth-of-type(3) {
        margin-top: 15px;
      }
      span {
        margin-right: 20px;
      }
    }
  }
  .add-broadcast {
    display: flex;
    margin: 10px 0;
    justify-content: space-between;
    .el-input {
      margin-right: 10px;
    }
  }
}
</style>
<style lang="scss">
.control {
  .el-card__header {
    padding: 15px;
    font-weight: bold;
  }
  .el-card__body {
    padding: 15px;
  }

  .bid-list {
    .el-card__header {
      padding: 0;
    }
    .el-card__body {
      padding: 0;
    }
  }
  .goods-list {
    .el-table--medium td, .el-table--medium th {
      padding: 6px 0;
      cursor: pointer;
    }
    td.goods-name-td .cell {
      color: rgb(81, 81, 206);
      text-decoration: underline;
    }
    .el-table .dis-row {
      background: #f0f9eb;
    }
  }
  .el-input.is-disabled .el-input__inner {
    background: #fff;
    color: #606266;
  }
  .el-radio-button__inner {
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
}
</style>
